<template>
  <div class="app-container">
    <el-dialog :visible.sync="dialog" :title="camera.cameraName" :before-close="close">
      <video v-if="dialog" id="video" controls="controls" style="width: 100%;height: 80%;margin-top: -30px;" autoplay="autoplay" />
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'CameraPreview',
  data() {
    return {
      wfs: null,
      camera: {},
      dialog: false
    }
  },
  mounted() {
    // 引入wfs.js文件
    const jsDom = document.createElement('script')
    jsDom.type = 'text/javascript'
    jsDom.src = '/static/wfsnew/wfs.js'
    this.$el.appendChild(jsDom)
  },
  destroyed() {
    if (this.wfs != null) {
      this.wfs.destroy()
    }
  },
  methods: {
    show(camera) {
      console.log(camera)
      this.dialog = true
      /* eslint-disable */
      setTimeout(() => {
        this.camera = camera
        console.log(Wfs)
        if (Wfs.isSupported()) {
          const video = document.getElementById('video')
          this.wfs = new Wfs()
          console.log(this.wfs)
          console.log('准备连接到ws')
          this.wfs.attachMedia(video, 'ch1', 'H264Raw', camera.id, process.env.VUE_APP_WS_API)
          console.log('连接到ws')
        }
      }, 50)
    },
    close() {
      this.dialog = false
      this.wfs.destroy()
    }
  }
}
</script>

<style scoped>

</style>
